import React from 'react';
import styles from './index.less';
import { ActivityIndicator } from 'antd-mobile';
import NavLink from 'umi/navlink';

export default class Sort extends React.Component {
  state = {
    sortsong: [],
    stateId: this.props.location.state.id,
    Id: 0,
    animating: true,
  };
  render() {
    return (
      <div>
        {this.state.sortsong.map((item, index) => {
          return (
            <NavLink
              to={`/dynamic-home/$song/${item.song_id}
            /${item.singer_id}/${item.song_path}`}
              key={index}
              className={styles.frame}
              onClick={window.location.reload}
            >
              <p className={styles.Id}>{this.state.Id++}</p>
              <div className={styles.middle}>
                <div className={styles.songName}>{item.song_name}</div>
                <p className={styles.singerName}>{item.singer_name}</p>
              </div>
              <img src="https://h5.1ting.com/touch/image/mobile/download_icon_press_big.png" />
            </NavLink>
          );
        })}
        <div className="toast-example">
          <ActivityIndicator toast text="Loading..." animating={this.state.animating} />
        </div>
      </div>
    );
  }
  componentWillMount() {
    //console.log(this.props.location)//传递过来的所有参数
    console.log(this.state.stateId); //val值

    fetch(`/api/client/tag/${this.state.stateId}.json`)
      .then(response => response.json())
      .then(data => {
        console.log(data);
        this.setState(prevState => ({
          sortsong: data.items,
          Id: prevState.Id + 1,
          animating: !this.state.animating,
        }));
      });
  }
}
